<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>档案设计管理</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css">
    <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <link rel="stylesheet" href="../../../lib/bootstarp/css/bootstrap.css">
    <style>
        .demo-table-expand {
            font-size: 0;
        }

        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }

        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>
    <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
    <script src="../../../lib/layui-v2.5.5/layui.all.js"></script>
    <script src="../../../lib/layui-v2.5.5/layui.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
    <script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../../../lib/common/jquery.cookie.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.3/qs.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../../lib/bootstarp/js/bootstrap.js"></script>
    <script src="config/common.js"></script>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div id="app">
            <div>
                <fieldset class="layui-elem-field">
                    <legend>搜索信息</legend>
                    <div class="layui-field-box" style="margin-left: 300px ">
                        <label for="">名称： </label>
                        <el-input v-model="record.productName" style="display: inline-block;width: 200px"
                                  placeholder="产品档案名称"></el-input>
                        <label for="">日期： </label>
                        <el-date-picker
                                v-model="record.registerTime"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择建档日期">
                        </el-date-picker>
                        <el-button type="primary" @click="findPage()" icon="el-icon-search">搜索</el-button>

                    </div>
                </fieldset>
                <div style="margin-left: 50px">
                    <div style="margin-right: 5px;display: inline-block">
                        <el-tooltip class="item" effect="dark" content="添加档案" placement="top-start">
                            <el-button type="success" size="small" @click="recordAdd=true,getUser()"
                                       icon="el-icon-plus">添加档案
                            </el-button>
                        </el-tooltip>
                    </div>
                    <div style="display: inline-block">
                        <el-badge :value="recovernum" class="item" type="primary">
                            <el-button size="small" icon="el-icon-delete-solid" @click="recycle()">回收站</el-button>
                        </el-badge>
                    </div>
                </div>
                <div>
                    <el-table
                            :data="recordList"
                            ref="multipleTable"
                            v-loading="loading"
                            border
                            @selection-change="handleSelectionChange"
                            style="width: 100%;margin: 0 auto">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column type="expand" label="详细" width="50">
                            <template slot-scope="props">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="产品ID">
                                        <span>{{ props.row.productId }}</span>
                                    </el-form-item>
                                    <el-form-item label="产品名称">
                                        <span>{{ props.row.productName }}</span>
                                    </el-form-item>
                                    <el-form-item label="厂商">
                                        <span>{{ props.row.factoryName }}</span>
                                    </el-form-item>
                                    <el-form-item label="配置">
                                        <span>{{ props.row.productClass }}</span>
                                    </el-form-item>
                                    <el-form-item label="保修期">
                                        <span>{{ props.row.warranty }}</span>
                                    </el-form-item>
                                    <el-form-item label="市场单价">
                                        <span>{{ props.row.listPrice }}</span>
                                    </el-form-item>
                                    <el-form-item label="成本单价">
                                        <span>{{ props.row.realCostPrice }}</span>
                                    </el-form-item>
                                    <el-form-item label="单位">
                                        <span>{{ props.row.amountUnit }}</span>
                                    </el-form-item>
                                    <el-form-item label="产品经理">
                                        <span>{{ props.row.responsiblePerson  }}</span>
                                    </el-form-item>
                                    <el-form-item label="登记人">
                                        <span>{{ props.row.register  }}</span>
                                    </el-form-item>
                                    <el-form-item label="产品描述">
                                        <span>{{ props.row. productDescribe }}</span>
                                    </el-form-item>
                                    <el-form-item label="建档时间">
                                        <span>{{ props.row.registerTime }}</span>
                                    </el-form-item>
                                    <el-form-item label="组成编号">
                                        <span>{{ props.row.materielArchivesId }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="ID"
                                prop="id">
                        </el-table-column>
                        <el-table-column
                                label="商品名称"
                                prop="productName">
                        </el-table-column>
                        <el-table-column
                                label="描述"
                                prop="productDescribe">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="160">
                            <template slot-scope="scope">
                                <el-button-group>
                                    <el-tooltip class="item" effect="dark" content="修改档案" placement="top-start">
                                        <el-button type="primary"
                                                   @click="recordUpdate = true,recordUpdateList(scope.row),getUse()"
                                                   size="small" icon="el-icon-edit"></el-button>
                                    </el-tooltip>
                                    <el-tooltip class="item" effect="dark" content="查看物料" placement="top-start">
                                        <el-button type="success" title="" data-toggle="modal" data-target="#myModal"
                                                   @click="show(scope.row)" size="small"
                                                   icon="el-icon-s-promotion"></el-button>
                                    </el-tooltip>
                                    <el-tooltip class="item" effect="dark" content="删除档案" placement="top-start">
                                        <el-button type="danger" title="" @click="deleterecord(scope.row)" size="small"
                                                   icon="el-icon-delete"></el-button>
                                    </el-tooltip>
                                </el-button-group>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[10, 20, 30, 40,50,60]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
                <div>
                    <!--修改的模态框-->
                    <el-drawer
                            title="修改档案"

                            :visible.sync="recordUpdate"
                            :before-close="recordUpdateClose">
                        <el-form ref="form" size="small" label-width="100px">
                            <el-input style="display: none" v-model="recordUpdates.id"></el-input>
                            <el-form-item label="产品名称">
                                <el-input style="width: 200px" v-model="recordUpdates.productName"></el-input>
                            </el-form-item>
                            <el-form-item label="厂商">
                                <el-input style="width: 200px" v-model="recordUpdates.factoryName"></el-input>
                            </el-form-item>
                            <el-form-item label="档次">
                                <el-select style="width: 200px" v-model="recordUpdates.productClass" clearable
                                           placeholder="请选择">
                                    <el-option
                                            v-for="item in productClassSelect"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="保修期"
                                          :rules="[  { required: true, message: '保修期不能为空'}, { type: 'number', message: '保修期必须为数字值'} ]">
                                <el-input style="width: 200px" type="number"
                                          v-model="recordUpdates.warranty"></el-input>
                            </el-form-item>
                            <el-form-item label="市场单价"
                                          :rules="[  { required: true, message: '单价不能为空'}, { type: 'number', message: '单价必须为数字值'} ]">
                                <el-input style="width: 200px" type="number"
                                          v-model="recordUpdates.listPrice"></el-input>
                            </el-form-item>
                            <el-form-item label="成本单价"
                                          :rules="[  { required: true, message: '成本单价不能为空'}, { type: 'number', message: '成本单价必须为数字值'} ]">
                                <el-input style="width: 200px" type="number"
                                          v-model="recordUpdates.realCostPrice"></el-input>
                            </el-form-item>
                            <el-form-item label="单位">
                                <el-input style="width: 200px" v-model="recordUpdates.amountUnit"></el-input>
                            </el-form-item>
                            <el-form-item label="产品经理">
                                <el-input style="width: 200px" v-model="recordUpdates.responsiblePerson"></el-input>
                            </el-form-item>
                            <el-form-item label="登记人" style="display: none">
                                <el-input style="width: 200px" :disabled="true"
                                          v-model="recordUpdates.register"></el-input>
                            </el-form-item>
                            <el-form-item label="产品描述">
                                <el-input type="textarea" style="width: 200px"
                                          v-model="recordUpdates.productDescribe"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="updaterecord">修改</el-button>
                            </el-form-item>
                        </el-form>
                    </el-drawer>
                </div>
            </div>
            <div>
                <!--添加的模态框-->
                <el-drawer
                        title="添加档案"

                        :visible.sync="recordAdd"
                        :before-close="recordAddClose">
                    <el-form ref="form" size="small" label-width="100px">
                        <el-form-item label="产品名称">
                            <el-input style="width: 200px" v-model="recordAdds.productName"></el-input>
                        </el-form-item>
                        <el-form-item label="厂商">
                            <el-input style="width: 200px" v-model="recordAdds.factoryName"></el-input>
                        </el-form-item>
                        <el-form-item label="档次">
                            <el-select style="width: 200px" v-model="recordAdds.productClass" clearable
                                       placeholder="请选择">
                                <el-option
                                        v-for="item in productClassSelect"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="保修期"
                                      :rules="[  { required: true, message: '保修期不能为空'}, { type: 'number', message: '保修期必须为数字值'} ]">
                            <el-input style="width: 200px" type="number" v-model="recordAdds.warranty"></el-input>
                        </el-form-item>
                        <el-form-item label="市场单价"
                                      :rules="[  { required: true, message: '单价不能为空'}, { type: 'number', message: '单价必须为数字值'} ]">
                            <el-input style="width: 200px" type="number" v-model="recordAdds.listPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="成本单价"
                                      :rules="[  { required: true, message: '成本单价不能为空'}, { type: 'number', message: '成本单价必须为数字值'} ]">
                            <el-input style="width: 200px" type="number" v-model="recordAdds.realCostPrice"></el-input>
                        </el-form-item>
                        <el-form-item label="单位">
                            <el-input style="width: 200px" v-model="recordAdds.amountUnit"></el-input>
                        </el-form-item>
                        <el-form-item label="产品经理">
                            <el-input style="width: 200px" v-model="recordAdds.responsiblePerson"></el-input>
                        </el-form-item>
                        <el-form-item label="登记人" style="display: none">
                            <el-input style="width: 200px" :disabled="true" v-model="recordAdds.register"></el-input>
                        </el-form-item>
                        <el-form-item label="产品描述">
                            <el-input type="textarea" style="width: 200px"
                                      v-model="recordAdds.productDescribe"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addrecord">添加</el-button>
                        </el-form-item>
                    </el-form>
                </el-drawer>
            </div>
            <!--查看物料的模态框-->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">物料组成</h4>
                        </div>
                        <div class="modal-body">
                            <blockquote class="layui-elem-quote layui-quote-nm">
                                产品编号：{{proID}}
                                产品名称：{{proName}}
                            </blockquote>

                            <div>
                                <button type="button" class="layui-btn" @click="matarual_herf()">添加产品物料</button>
                            </div>
                            <div>
                                <table class="layui-table">
                                    <colgroup>
                                        <col width="150">
                                        <col width="200">
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>物料id</th>
                                        <th>名称</th>
                                        <th>所需数量</th>
                                        <th>描述</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="matarual in matarual_constitute">
                                        <td>{{matarual.materialid}}</td>
                                        <td>{{matarual.materialname}}</td>
                                        <td>{{matarual.materialnum}}</td>
                                        <td>{{matarual.materialremark}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>

    layui.use(['layer', 'form'], function () {
        var layer = layui.layer
            , form = layui.form;

        var vm = new Vue({
            el: '#app',
            data: {
                /*加载动画*/
                loading: true,
                /*产品档次*/
                productClassSelect: [
                    {
                        value: '高档',
                        label: '高档'
                    }, {
                        value: '中档',
                        label: '中档'
                    }, {
                        value: '低档',
                        label: '低档'
                    }
                ],
                /*//修改的表单实体*/
                recordUpdates: {
                    productName: '',
                    factoryName: '',
                    productClass: '',
                    warranty: '',
                    listPrice: '',
                    realCostPrice: '',
                    amountUnit: '',
                    responsiblePerson: '',
                    productDescribe: '',
                    register: ''
                },
                recordUpdate: false,//修改模态框默认关闭
                recordAdd: false,//添加模态框默认关闭
                page: 1,//页码
                pageSize: 10,//行数
                total: 0,//总记录数
                recordList: [],//展示的数据
                record: {//查询的条件
                    productName: "",//产品名称
                    registerTime: ""//建档时间
                },
                recordAdds: {},//添加的实体
                deleterecords: [],//删除的id
                recovernum: 0,//回收站数量
                proID: "",//产品id
                proName: "",//产品名称
                matarual_constitute: []//物料组成
            },
            methods: {
                /*查看物料组成*/
                show(value) {
                    this.proID = value.productId
                    this.proName = value.productName;
                    axios.get(api1 + "design_record/selectBymaterielArchivesId?materielArchivesId=" + value.materielArchivesId).then(res => {
                        this.matarual_constitute = res.data;
                    }).catch(err => {

                    })
                },
                /*获取当前用户名*/
                getUser() {
                    var register = $.parseJSON(window.localStorage.getItem("user"));
                    this.recordAdds.register = register.name;

                },
                /*//获取点击的行数据*/
                recordUpdateList(row) {
                    this.recordUpdates = row;//绑定到修改的实体
                },
                /*分页条件查询*/
                findPage() {
                    axios.post(api1 + "/design_record/findPage?page=" + this.page + "&pageSize=" + this.pageSize, this.record).then(res => {
                        this.total = res.data.total;
                        this.recordList = res.data.data;
                        this.loading = false;
                    }).catch(err => {
                        vm.$message({//异常
                            showClose: true,
                            message: "获取超时，请检查网络",
                            type: 'error'
                        });
                    })
                },
                /*设置行数*/
                handleSizeChange(pageSize) {
                    this.pageSize = pageSize;
                },
                /*获取页码*/
                handleCurrentChange(page) {
                    this.page = page;
                    this.findPage();
                },
                /*全选*/
                toggleSelection(rows) {//全选选中
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        });
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                },
                /*关闭修改模态框*/
                recordUpdateClose(done) {
                    layer.confirm('确认关闭吗?', {icon: 3, title: '提示'}, function (index) {
                        layer.close(index);
                        done();
                        vm.findPage()
                    });
                },
                /*获取复选框选中的值*/
                handleSelectionChange(value) {
                    this.deleterecords = value;
                },
                /*关闭添加的模态框*/
                recordAddClose(done) {
                    layer.confirm('确认关闭吗?', {icon: 3, title: '提示'}, function (index) {
                        layer.close(index);
                        done();//关闭添加模态框
                        vm.recordAdds = {}//清空添加文本框
                    });
                },
                /*修改档案*/
                updaterecord() {
                    var data = this.recordUpdates;
                    /*验证非空*/
                    if (data.productName == null || data.productName === "") {
                        vm.$message({showClose: true, message: "请输入商品名称", type: 'error'});
                        return;
                    }
                    if (data.factoryName == null || data.factoryName === "") {
                        vm.$message({showClose: true, message: "请输入厂商", type: 'error'});
                        return;
                    }
                    if (data.productClass == null || data.productClass === "") {
                        vm.$message({showClose: true, message: "请选择档次", type: 'error'});
                        return;
                    }
                    if (data.warranty === "" || data.warranty === "") {
                        vm.$message({showClose: true, message: "请输入保修期", type: 'error'});
                        return;
                    }
                    if (data.listPrice == null || data.listPrice === "") {
                        vm.$message({showClose: true, message: "请输入市场单价", type: 'error'});
                        return;
                    }
                    if (data.realCostPrice == null || data.realCostPrice === "") {
                        vm.$message({showClose: true, message: "请输入成本单价", type: 'error'});
                        return;
                    }
                    if (data.amountUnit == null || data.amountUnit === "") {
                        vm.$message({showClose: true, message: "请输入单位", type: 'error'});
                        return;
                    }
                    if (data.responsiblePerson == null || data.responsiblePerson === "") {
                        vm.$message({showClose: true, message: "请输入产品经理", type: 'error'});
                        return;
                    }
                    layer.confirm('请确认数据无误！', {icon: 3, title: '提示'}, function (index) {
                        axios.post(api1 + "design_record/updaterecord", data).then(res => {
                            if (res.data.success) {
                                vm.findPage();
                                vm.$message({//修改成功
                                    showClose: true,
                                    message: res.data.message,
                                    type: 'success'
                                });
                            } else {
                                vm.$message({//修改失败
                                    showClose: true,
                                    message: res.data.message,
                                    type: 'error'
                                });
                            }
                        }).catch(err => {//系统异常
                            vm.$message({//异常
                                showClose: true,
                                message: "系统异常",
                                type: 'error'
                            });
                        })
                        layer.close(index);
                    });
                },
                /*添加档案*/
                addrecord() {
                    var data = this.recordAdds;//获取数据
                    /*验证非空*/
                    if (data.productName == null || data.productName === "") {
                        vm.$message({showClose: true, message: "请输入商品名称", type: 'error'});
                        return;
                    }
                    if (data.factoryName == null || data.factoryName === "") {
                        vm.$message({showClose: true, message: "请输入厂商", type: 'error'});
                        return;
                    }
                    if (data.productClass == null || data.productClass === "") {
                        vm.$message({showClose: true, message: "请选择档次", type: 'error'});
                        return;
                    }
                    if (data.warranty === "" || data.warranty === "") {
                        vm.$message({showClose: true, message: "请输入保修期", type: 'error'});
                        return;
                    }
                    if (data.listPrice == null || data.listPrice === "") {
                        vm.$message({showClose: true, message: "请输入市场单价", type: 'error'});
                        return;
                    }
                    if (data.realCostPrice == null || data.realCostPrice === "") {
                        vm.$message({showClose: true, message: "请输入成本单价", type: 'error'});
                        return;
                    }
                    if (data.amountUnit == null || data.amountUnit === "") {
                        vm.$message({showClose: true, message: "请输入单位", type: 'error'});
                        return;
                    }
                    if (data.responsiblePerson == null || data.responsiblePerson === "") {
                        vm.$message({showClose: true, message: "请输入产品经理", type: 'error'});
                        return;
                    }
                    if (data.register == null || data.register === "") {
                        vm.$message({showClose: true, message: "请输入登记人信息", type: 'error'});
                        return;
                    }
                    /*添加*/
                    layer.confirm('再次确认数据！', {icon: 3, title: '提示'}, function (index) {
                        axios.post(api1 + "design_record/addrecord", data).then(res => {
                            if (res.data.success) {
                                vm.findPage();
                                vm.$message({//添加成功
                                    showClose: true,
                                    message: res.data.message,
                                    type: 'success'
                                });
                            } else {
                                vm.$message({//添加失败
                                    showClose: true,
                                    message: res.data.message,
                                    type: 'error'
                                });
                            }
                        }).catch(err => {
                            vm.$message({//异常
                                showClose: true,
                                message: "系统异常",
                                type: 'error'
                            });
                        })
                        layer.close(index);
                    });
                },
                /*回收·档案*/
                deleterecord(value) {
                    layer.confirm('删除后将会进入回收站', {icon: 3, title: '确定删除吗？'}, function (index) {
                        axios.post(api1 + "/design_record/deleterecord", value).then(res => {
                            if (res.data.success) {
                                vm.findPage();
                                vm.$message({//回收成功
                                    showClose: true,
                                    message: res.data.message,
                                    type: 'success'
                                });
                            } else {
                                vm.$message({//回收失败
                                    showClose: true,
                                    message: res.data.message,
                                    type: 'error'
                                });
                            }
                            vm.seachrecycle();
                        }).catch(err => {
                            vm.$message({//异常
                                showClose: true,
                                message: "系统异常",
                                type: 'error'
                            });
                        })

                        layer.close(index);
                    });
                },
                /*跳转到回收页面*/
                recycle() {
                    $(location).prop('href', 'record_recycle.html');
                },
                /*跳转到回收页面*/
                matarual_herf() {
                    $(location).prop('href', 'matarual_constitute.html');
                },
                /*查询已回收的数量*/
                seachrecycle() {
                    axios.get(api1 + "design_record/recovernum").then(res => {
                        this.recovernum = res.data;
                    }).catch()
                }

            },
            created() {
                /*页面加载*/
                this.findPage();
                /*登记人信息*/
                this.getUser();
                /*获取回收站信息*/
                this.seachrecycle();
            }
        });
    });

</script>
</html>
